<!doctype html>
<html lang="ch">

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="description" content="左右结构项目，属于大人员的社交工具">
        <meta name="keywords" content="左右结构项目 社交 占座 ">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta name="format-detection" content="telephone=no">
        <title>管理员</title>
        <script src="js/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script>
            $(function() {
                $(".meun-item").click(function() {
                    $(".meun-item").removeClass("meun-item-active");
                    $(this).addClass("meun-item-active");
                    var itmeObj = $(".meun-item").find("img");
                    itmeObj.each(function() {
                        var items = $(this).attr("src");
                        items = items.replace("_grey.png", ".png");
                        items = items.replace(".png", "_grey.png")
                        $(this).attr("src", items);
                    });
                    var attrObj = $(this).find("img").attr("src");
                    ;
                    attrObj = attrObj.replace("_grey.png", ".png");
                    $(this).find("img").attr("src", attrObj);
                });
                $("#topAD").click(function() {
                    $("#topA").toggleClass(" glyphicon-triangle-right");
                    $("#topA").toggleClass(" glyphicon-triangle-bottom");
                });
                $("#topBD").click(function() {
                    $("#topB").toggleClass(" glyphicon-triangle-right");
                    $("#topB").toggleClass(" glyphicon-triangle-bottom");
                });
                $("#topCD").click(function() {
                    $("#topC").toggleClass(" glyphicon-triangle-right");
                    $("#topC").toggleClass(" glyphicon-triangle-bottom");
                });
                $(".toggle-btn").click(function() {
                    $("#leftMeun").toggleClass("show");
                    $("#rightContent").toggleClass("pd0px");
                })
            })
        </script>
        <!--[if lt IE 9]>
  <script src="js/html5shiv.min.js"></script>
  <script src="js/respond.min.js"></script>
<![endif]-->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="css/common.css" />
        <link rel="stylesheet" type="text/css" href="css/slide.css" />
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
        <link rel="stylesheet" type="text/css" href="css/flat-ui.min.css" />
        <link rel="stylesheet" type="text/css" href="css/jquery.nouislider.css">
    </head>

    <body>
        <div id="wrap">
            <!-- 左侧菜单栏目块 -->
            <div class="leftMeun" id="leftMeun">
                <div id="logoDiv">
                    <p id="logoP"><img id="logo" alt="左右结构项目" src="images/logo.png"><span>电子设备报修系统</span></p>
                </div>
                <div id="personInfor">
                    <p id="adminN">
                    </p>
                    <p id="adminT">
                    </p>
                    <p>
                        <a onclick="logout()">退出登录</a>
                    </p>
                </div>
                <div class="meun-title">管理员操作</div>
                <div class="meun-item meun-item-active" href="#order" aria-controls="sour" role="tab" data-toggle="tab" onclick="page(1,false)"><img src="images/icon_order.png">订单管理</div>
                <div class="meun-item" href="#category" aria-controls="char" role="tab" data-toggle="tab" onclick="pageBycategory(1,true)"><img src="images/icon_category_grey.png">故障类型管理</div>
                <div class="meun-title">账号管理</div>
                <div class="meun-item" href="#chan" aria-controls="scho" role="tab" data-toggle="tab"><img src="images/icon_changePassword_grey.png">修改密码</div>
            </div>
            <!-- 右侧具体内容栏目 -->
            <div id="rightContent">
                <a class="toggle-btn" id="nimei">
                    <i class="glyphicon glyphicon-align-justify"></i>
                </a>
                <!-- Tab panes -->
                <div class="tab-content">
                    <!-- 订单管理模块 -->
                    <div role="tabpanel" class="tab-pane active" id="order">
                        <div class="check-div form-inline">
                        </div>
                        <div class="data-div">
                            <div class="row tableHeader">
                                <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 ">
                                编号
                                </div>
                                <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1">
                                    故障类型
                                </div>
                                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
                                    请求处理方式
                                </div>
                                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                                    故障地点
                                </div>
                                <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                                    故障描述
                                </div>
                                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
                                    操作
                                </div>
                            </div>
                            <div class="tablebody" id="faultList">

                            </div>
                        </div>
                        <!--页码块-->
                        <footer class="footer">
                            <ul class="pagination">
                                <li>
                                    <select id="pages">
                                    </select>
                                    页
                                </li>
                                <li class="gray" id="totalPages">
                                </li>
                                <li id="Left">
                                </li>
                                <li id="Right">
                                </li>
                            </ul>
                        </footer>

                        <div class="modal fade" id="refuse" role="dialog" aria-labelledby="gridSystemModalLabel">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                        <h4 class="modal-title">拒绝此申请</h4>
                                    </div>
                                    <div class="modal-body">
                                        <div class="container-fluid">
                                            <form class="form-horizontal">
                                                <div class="form-group ">
                                                    <label for="cause" class="col-xs-3 control-label">拒绝理由：</label>
                                                    <div class="col-xs-6 ">
                                                        <input type="text" class="form-control input-sm duiqi" id="cause">
                                                    </div>
                                                </div>

                                            </form>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-xs btn-white" data-dismiss="modal" onclick="cause.value = '';">取 消</button>
                                        <button type="button" class="btn btn-xs btn-green" data-dismiss="modal" aria-label="Close" onclick="refuse()">保 存</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 故障类型管理模块 -->
                    <div role="tabpanel" class="tab-pane" id="category">

                        <div class="check-div">
                            <button class="btn btn-yellow btn-xs" data-toggle="modal" data-target="#addChar">添加故障类型</button>
                        </div>
                        <div class="data-div">
                            <div class="row tableHeader">
                                <div class="col-xs-4 ">
                                    编码
                                </div>
                                <div class="col-xs-6">
                                    故障类型名称
                                </div>
                                <div class="col-xs-2">
                                    操作
                                </div>
                            </div>
                    <div class="tablebody" id="faultCategoryList">

                    </div>

                </div>
                <!--页码块-->
                <footer class="footer">
                    <ul class="pagination">
                        <li>
                            <select id="categoryPages">
                            </select>
                            页
                        </li>
                        <li class="gray" id="cateTotalPages">
                        </li>
                        <li id="categoryLeft">
                        </li>
                        <li id="categoryRight">
                        </li>
                    </ul>
                </footer>
                <!--增加权限弹出窗口-->
                <div class="modal fade" id="addChar" role="dialog" aria-labelledby="gridSystemModalLabel">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title">添加故障类型</h4>
                            </div>
                            <div class="modal-body">
                                <div class="container-fluid">
                                    <form class="form-horizontal">
                                        <div class="form-group ">
                                            <label for="categoryName" class="col-xs-3 control-label">类型名：</label>
                                            <div class="col-xs-6 ">
                                                <input type="text" class="form-control input-sm duiqi" id="categoryName">
                                            </div>
                                        </div>

                                    </form>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-xs btn-white" data-dismiss="modal" onclick="categoryName.value = '';">取 消</button>
                                <button type="button" class="btn btn-xs btn-green" data-dismiss="modal" aria-label="Close" onclick="addCategory()">保 存</button>
                            </div>
                        </div>
                    </div>
                </div>

                <!--弹出删除权限警告窗口-->
                <div class="modal fade" id="deleteChar" role="dialog" aria-labelledby="gridSystemModalLabel">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="gridSystemModalLabel">提示</h4>
                            </div>
                            <div class="modal-body">
                                <div class="container-fluid">
                                    确定要删除该类型？删除后不可恢复！
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-xs btn-white" data-dismiss="modal">取 消</button>
                                <button type="button" class="btn btn-xs btn-danger" data-dismiss="modal" aria-label="Close" onclick="deleteCategory()">保 存</button>
                            </div>
                        </div>
                        <!-- /.modal-content -->
                    </div>
                    <!-- /.modal-dialog -->
                </div>

            </div>
            <!-- 修改密码模块 -->
            <div role="tabpanel" class="tab-pane" id="chan">
                <div class="check-div">
                </div>
                <div style="padding: 50px 0;margin-top: 50px;background-color: #fff; text-align: right;width: 420px;margin: 50px auto;">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label for="oldPassword" class="col-xs-4 control-label">原密码：</label>
                            <div class="col-xs-5">
                                <input type="password" name="oldPassword" class="form-control input-sm duiqi" id="oldPassword" placeholder="" style="margin-top: 7px;">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="newPassword" class="col-xs-4 control-label">新密码：</label>
                            <div class="col-xs-5">
                                <input type="password" name="newPassword" class="form-control input-sm duiqi" id="newPassword" placeholder="" style="margin-top: 7px;">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="newPasswordAgain" class="col-xs-4 control-label">重复密码：</label>
                            <div class="col-xs-5">
                                <input type="password" name="newPasswordAgain" class="form-control input-sm duiqi" id="newPasswordAgain" placeholder="" style="margin-top: 7px;">
                            </div>
                        </div>
                        <div class="form-group text-right">
                            <div class="col-xs-offset-4 col-xs-5" style="margin-left: 169px;">
                                <button type="reset" class="btn btn-xs btn-white">取 消</button>
                                <button type="button" class="btn btn-xs btn-green" onclick="changePassword()">保存</button>
                            </div>
                        </div>
                    </form>
                </div>

            </div>
        </div>
    </div>
</div>


<script src="js/jquery.nouislider.js"></script>

<!-- this page specific inline scripts -->
<script>
    var adminN = document.getElementById('adminN')
    var adminT = document.getElementById('adminT')
    var adminId = null
    $.ajax({
        type:'POST',
        url:'admin/get_admin_info.do',
        async:false,
        success:function (res) {
            if(res.status == 0){
                adminN.innerHTML="用户: "+res.data.adminName
                adminT.innerHTML="联系电话: "+res.data.adminTel
                adminId = res.data.adminId
            }
        }
    })


    var websocket = null;


    //判断当前浏览器是否支持WebSocket
    if('WebSocket' in window){
        websocket = new WebSocket("ws://localhost:8080/repair/websocket/admin/"+adminId);
    }
    else{
        alert('Not support websocket')
    }

    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function(){
        websocket.close();
    }

    //接收到消息的回调方法
    websocket.onmessage = function(event){
        page(1,true)
    }


    var faultList = document.getElementById('faultList')
    var pages = document.getElementById('pages')
    var totalPages = document.getElementById('totalPages')
    var Left = document.getElementById('Left')
    var Right = document.getElementById('Right')
    var pe = 0;
    function page(p,flag) {
        while(faultList.hasChildNodes()){
            faultList.removeChild(faultList.firstChild)
        }
        $.ajax({
            type:'GET',
            url:'admin/select_all_user_order.do',
            data:{
                pageNum:p
            },
            success:function (res) {
                if(res.status == 0){
                    while(Left.hasChildNodes()){
                        Left.removeChild(Left.firstChild)
                    }
                    while(Right.hasChildNodes()){
                        Right.removeChild(Right.firstChild)
                    }
                    var il = document.createElement('i')
                    var ir = document.createElement('i')
                    il.className="glyphicon glyphicon-menu-left"
                    ir.className="glyphicon glyphicon-menu-right"
                    Left.appendChild(il)
                    Right.appendChild(ir)
                    il.onclick = function () {
                        if(res.data.isFirstPage == false){
                            page(--p,false)
                        }else{
                            window.location.href="javascript:void(0)"
                        }
                    }
                    ir.onclick = function () {
                        if(res.data.hasNextPage == true){
                            page(++p,false)
                        }else{
                            window.location.href="javascript:void(0)"
                        }
                    }
                    totalPages.innerHTML = "共"+res.data.pages+"页"+",当前第"+p+"页"
                    if(res.data.pages != pe || flag == true){
                        while(pages.hasChildNodes()){
                            pages.removeChild(pages.firstChild)
                        }
                        for(var i = 0;i < res.data.pages;i++){
                            crateP(i,res)
                        }
                    }
                    pe = res.data.pages
                    pages.onchange = function (e){
                        page(e.target.value,false)
                    }
                    for(var j = 0;j < res.data.list.length;j++){
                        createRow(j,res)
                    }
                }
                if(res.status == 1){
                    crateN(res)
                }
            }
        })
    }


    function crateP(i,res) {
        var option =  document.createElement('option')
        option.innerHTML= res.data.navigatepageNums[i]
        option.value = res.data.navigatepageNums[i]
        pages.appendChild(option)
    }

    var refuseFaultId = null
    function createRow(j,res) {
        var div = document.createElement('div')
        var div1 =  document.createElement('div')
        var div2 =  document.createElement('div')
        var div3 =  document.createElement('div')
        var div4 =  document.createElement('div')
        var div5 =  document.createElement('div')
        var div6 =  document.createElement('div')
        var button1 = document.createElement('button')
        var button2 = document.createElement('button')
        div.className="row"
        div1.className="col-lg-1 col-md-1 col-sm-1 col-xs-1"
        div2.className="col-lg-1 col-md-1 col-sm-1 col-xs-1 "
        div3.className="col-lg-2 col-md-2 col-sm-2 col-xs-2 "
        div4.className="col-lg-3 col-md-3 col-sm-3 col-xs-3 "
        div5.className="col-lg-3 col-md-3 col-sm-3 col-xs-3 "
        div6.className="col-lg-2 col-md-2 col-sm-2 col-xs-2 "
        button1.className="btn btn-success btn-xs"
        button2.className="btn btn-danger btn-xs"
        div1.innerHTML=res.data.list[j].faultId
        div2.innerHTML=res.data.list[j].faultCategoryName
        div3.innerHTML=res.data.list[j].faultWayName
        div4.innerHTML=res.data.list[j].faultSite
        div5.innerHTML=res.data.list[j].faultDescribe
        button1.innerHTML="接受"
        button2.innerHTML="拒绝"
        button2.onclick= function () {
            refuseFaultId = res.data.list[j].faultId
        }
        button1.onclick= function a() {
           $.ajax({
               type:'GET',
               url:'admin/add_tentative_fault_oder.do',
               data:{
                   faultId:res.data.list[j].faultId
               },
               success:function (res) {
                   if(res.status == 0){
                       page(1)
                       alert("派单成功")
                   }
               }
           })
        }
        button2.setAttribute("data-target","#refuse")
        button2.setAttribute("data-toggle","modal")
        div6.appendChild(button1)
        div6.appendChild(button2)
        div.appendChild(div1)
        div.appendChild(div2)
        div.appendChild(div3)
        div.appendChild(div4)
        div.appendChild(div5)
        div.appendChild(div6)
        faultList.appendChild(div)
    }

    function crateN(res) {
        var img = document.createElement('img')
        var h5 = document.createElement('h5')
        img.className="center-block"
        img.style.marginTop = "100px"
        img.src="images/not_found.png"
        h5.className="center-block"
        h5.style.textAlign="center"
        h5.style.marginTop="30px"
        h5.innerHTML=res.msg
        faultList.appendChild(img)
        faultList.appendChild(h5)
    }


    function logout() {
        $.ajax({
            type:'POST',
            url:'admin/logout.do',
            success:function (res) {
                if(res.status == 0){
                    window.location.href="login.html"
                }
            }
        })
    }

    var categoryName = document.getElementById('categoryName')
    function addCategory() {
        $.ajax({
            type:"GET",
            url:"admin/add_fault_category.do",
            data:{
                faultCategoryName:categoryName.value
            },
            success:function (res) {
                categoryName.value = ""
                if(res.status == 0){
                    pageBycategory(1,true)
                }
                if(res.status == 1){
                    alert(res.msg)
                }
            }
        })
    }
    var faultCategoryList = document.getElementById('faultCategoryList')
    var categoryPages = document.getElementById('categoryPages')
    var cateTotalPages = document.getElementById('cateTotalPages')
    var categoryLeft = document.getElementById('categoryLeft')
    var categoryRight = document.getElementById('categoryRight')
    var cPe = 0
    var deleteCategoryId = null
    function pageBycategory(p,flag) {
        while(faultCategoryList.hasChildNodes()){
            faultCategoryList.removeChild(faultCategoryList.firstChild)
        }
        $.ajax({
            type:'GET',
            url:'admin/select_all_fault_category_by_page.do',
            data:{
                pageNum:p
            },
            success:function (res) {
                if(res.status == 0){
                    while(categoryLeft.hasChildNodes()){
                        categoryLeft.removeChild(categoryLeft.firstChild)
                    }
                    while(categoryRight.hasChildNodes()){
                        categoryRight.removeChild(categoryRight.firstChild)
                    }
                    var il = document.createElement('i')
                    var ir = document.createElement('i')
                    il.className="glyphicon glyphicon-menu-left"
                    ir.className="glyphicon glyphicon-menu-right"
                    categoryLeft.appendChild(il)
                    categoryRight.appendChild(ir)
                    il.onclick = function () {
                        if(res.data.isFirstPage == false){
                            pageBycategory(--p,false)
                        }else{
                            window.location.href="javascript:void(0)"
                        }
                    }
                    ir.onclick = function () {
                        if(res.data.hasNextPage == true){
                            pageBycategory(++p,false)
                        }else{
                            window.location.href="javascript:void(0)"
                        }
                    }
                    cateTotalPages.innerHTML = "共"+res.data.pages+"页"+",当前第"+p+"页"
                    if(res.data.pages != cPe || flag == true){
                        while(categoryPages.hasChildNodes()){
                            categoryPages.removeChild(categoryPages.firstChild)
                        }
                        for(var i = 0;i < res.data.pages;i++){
                            cratePage(i,res)
                        }
                    }
                    cPe = res.data.pages
                    categoryPages.onchange = function (e){
                        pageBycategory(e.target.value,false)
                    }
                    for(var j = 0;j < res.data.list.length;j++){
                        createR(j,res)
                    }
                }
                if(res.status == 1){
                    crateN(res)
                }
            }
        })
    }

    function createR(j,res) {
        var div = document.createElement('div')
        var div1 =  document.createElement('div')
        var div2 =  document.createElement('div')
        var div3 =  document.createElement('div')
        var button1 = document.createElement('button')
        div.className="row"
        div1.className="col-lg-4 col-md-4 col-sm-4 col-xs-4"
        div2.className="col-lg-6 col-md-6 col-sm-6 col-xs-6"
        div3.className="col-lg-2 col-md-2 col-sm-2 col-xs-2"
        button1.className="btn btn-danger btn-xs"
        div1.innerHTML=res.data.list[j].faultCategoryId
        div2.innerHTML=res.data.list[j].faultCategoryName
        button1.innerHTML="删除"
        button1.onclick=function (){
            deleteCategoryId = res.data.list[j].faultCategoryId;
        }
        button1.setAttribute("data-toggle","modal")
        button1.setAttribute("data-target","#deleteChar")
        div3.appendChild(button1)
        div.appendChild(div1)
        div.appendChild(div2)
        div.appendChild(div3)
        faultCategoryList.appendChild(div)
    }

    function cratePage(i,res) {
        var option =  document.createElement('option')
        option.innerHTML= res.data.navigatepageNums[i]
        option.value = res.data.navigatepageNums[i]
        categoryPages.appendChild(option)
    }

    function deleteCategory() {
        $.ajax({
            type:"GET",
            url:"admin/delete_fault_category.do",
            data:{
                faultCategoryId:deleteCategoryId
            },
            success:function (res) {
              if(res.status == 0){
                  pageBycategory(1)
              }
              if(res.status == 1){
                  alert(res.msg)
              }
            }
        })
    }


    var oldPassword = document.getElementById('oldPassword')
    var newPassword = document.getElementById('newPassword')
    var newPasswordAgain = document.getElementById('newPasswordAgain')
    function changePassword() {
        $.ajax({
            type: 'POST',
            url: 'admin/new_password.do',
            data: {
                adminId: adminId,
                oldPassword:oldPassword.value,
                newPassword:newPassword.value,
                newPasswordAgain:newPasswordAgain.value
            },
            success: function (res) {
                oldPassword.value=""
                newPassword.value=""
                newPasswordAgain.value=""
                if(res.status == 0){
                    alert("修改成功!")
                }else{
                    alert(res.msg)
                }
            }
        })
    }


    var cause = document.getElementById('cause')
    var refuseUserId = null
    function refuse() {
        $.ajax({
            type: 'POST',
            url: 'admin/delete_fault.do',
            data: {
                faultId:refuseFaultId
            },
            success: function (res) {
                if(res.status == 0){
                    refuseUserId = res.data
                    page(1,true)
                    $.ajax({
                        type: 'GET',
                        url: 'admin/send_email.do',
                        data: {
                            userId:refuseUserId,
                            cause:cause.value
                        },
                        success: function (res) {
                            if(res.status == 1){
                                alert(res.msg)
                            }
                        }
                    })
                }
                if(res.status == 1){
                    alert(res.msg)
                }
            }
        })
    }


    function huadong(my, unit, def, max) {
        $(my).noUiSlider({
            range: [0, max],
            start: [def],
            handles: 1,
            connect: 'upper',
            slide: function() {
                var val = Math.floor($(this).val());
                $(this).find(".noUi-handle").text(
                    val + unit
                );
                console.log($(this).find(".noUi-handle").parent().parent().html());
            },
            set: function() {
                var val = Math.floor($(this).val());
                $(this).find(".noUi-handle").text(
                    val + unit
                );
            }
        });
        $(my).val(def, true);
    }
    huadong('.slider-minmax1', "分钟", "5", 30);
    huadong('.slider-minmax2', "分钟", "6", 15);
    huadong('.slider-minmax3', "分钟", "10", 60);
    huadong('.slider-minmax4', "次", "2", 10);
    huadong('.slider-minmax5', "天", "3", 7);
    huadong('.slider-minmax6', "天", "8", 10);
</script>
</body>

</html>